<template>
  <div class="details-list">
    <div class="list">
      <a-space direction="vertical" fill
        ><a-table
          :scroll="scroll"
          :pagination="false"
          :bordered="true"
          fixed
          :data="form.userStaffs"
        >
          <template #columns>
            <a-table-column
              :width="30"
              v-for="item in selectedHeader"
              :key="item.id"
              :title="item.title"
              :data-index="item.dataIndex"
            >
              <template v-if="item.dataIndex === 'position'" #cell="{ record }">
                {{ record.positionId.name }}
              </template>
              <template
                v-else-if="item.dataIndex === 'department'"
                #cell="{ record }"
              >
                {{ record.department.name }}
              </template>
              <template
                v-else-if="item.dataIndex === 'roles'"
                #cell="{ record }"
              >
                {{ record.positionId.roles }}
              </template>
            </a-table-column>
          </template>
        </a-table>

        <a-button style="margin-left: 20px" type="primary" @click="save">
          保存
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch, computed, onMounted } from 'vue';
  import mitter from '@/utils/mitt';
  import { Getsingledepartment } from '@/api/home/System settings/department/index';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import { modDepartment } from '@/api/home/System settings/department/index';

  const departmentid = ref();
  let form = ref({});
  const data: any = ref([]);
  const TableData = ref([]);
  const scroll = {
    y: 200,
  };

  const depaId = ref();

  // 获取单个部门信息
  const SingleDepartmentData = async (id: number) => {
    const res = await Getsingledepartment({ id: depaId.value });
    console.log(res);
    form.value = res;
  };

  mitter.on('depaId', (val: any) => {
    depaId.value = val.id;
    SingleDepartmentData(depaId.value);
    // data.value = val;
  });

  // const defaultdata = () => {
  //   const defaultdata = JSON.parse(localStorage.getItem('department'));
  //   form.value.name = defaultdata.name;
  //   form.value.id = defaultdata.id;
  //   form.value.pid = defaultdata.pid;
  //   form.value.principal = defaultdata.principal;
  // };
  const defaultdata = () => {
    const { name, id, pid, principal } = JSON.parse(
      localStorage.getItem('department')
    );
    Object.assign(form.value, { name, id, pid, principal });
  };

  // 获取部门成员信息
  // const GetMemberTableData = (data) => {
  //   TableData.value = data.map((i) => {
  //     return JSON.parse(JSON.stringify(i));
  //   });
  // };
  const GetMemberTableData = (data) => {
    TableData.value = data.map(JSON.parse);
  };

  const columns = [
    {
      id: 1,
      title: '姓名',
      visible: true,
      type: 'string',
      dataIndex: 'name',
    },
    {
      id: 2,
      title: '工号',
      visible: true,
      type: 'string',
      dataIndex: 'staffNo',
    },
    {
      id: 3,
      title: '部门',
      visible: true,
      type: 'string',
      dataIndex: 'department',
    },
    {
      id: 4,
      title: '子部门',
      visible: true,
      type: 'string',
      dataIndex: 'department',
    },
    {
      id: 5,
      title: '岗位',
      visible: true,
      type: 'string',
      dataIndex: 'position',
    },
    {
      id: 6,
      title: '角色',
      visible: true,
      type: 'string',
      dataIndex: 'roles',
    },
  ];

  const selectedHeader = computed(() => {
    const arr: any = [];
    columns.forEach((item) => {
      if (item.visible) {
        arr.push(item);
      }
    });
    return arr;
  });

  // 修改
  // const save = async () => {
  //   await modDepartment({
  //     id: form.value.id,
  //     name: form.value.name,
  //     pid: form.value.pid,
  //     principal: form.value.principal,
  //   });
  //   const refresh = 1;
  //   mitter.emit('msg', refresh);
  // };
  const save = async () => {
    const { id, name, pid, principal } = form.value;
    await modDepartment({ id, name, pid, principal });
    mitter.emit('msg', 1);
  };

  // watch(data, (n, o) => {
  //   SingleDepartmentData(n[0].id);
  //   GetMemberTableData(n[1].data);
  // });

  onMounted(() => {});
</script>

<style scoped lang="less">
  .details-list {
    display: flex;
    .list {
      padding: 10px 0;
      flex: 1;
      .title {
        width: 100%;
        height: 56px;
        border-bottom: 1px solid #ccc;
        font-weight: 700;
      }
    }
  }
</style>
